<template>
  <div class="reds" @click="onclick" @mousewheel="moveo">
    <loading v-if="isLoading"></loading>
    <div class="reder" v-show="show">
      <div class="nav">
        <div class="toplist">
          <router-link  to class="back">
            <i @click="$router.back(`/cs?id=${id}&title=${title}`)"></i>
            <!-- <i @click="history.go(-1)"></i> -->
          </router-link>
          <button v-if="bookbtns" class="books" @click="getdata(book_uuid,book_title)">
            <i></i>
            加入书架
          </button>
          <button v-else class="booksdel" @click="dldata(book_uuid,book_title)">
            <i></i>
            移除书架
          </button>
          <router-link to="/home" class="home">
            <i></i>
            首页
          </router-link>
        </div>
      </div>
    </div>
    <div class="text-body"></div>
    <div class="link">
      <div class="link-text">
        <h1>抱歉，这是付费章节</h1>
        <img src="../static/imgs/dogss.png" alt="" />
      </div>
    </div>
    <div class="set-text-bs" v-show="setbockz">
      <p class="texzj">
        字号
        <button class="font-big">A+</button>
        <span>{{ textsize }}</span>
        <button class="font-small">A-</button>
      </p>
    </div>
    <div class="botms" v-show="show">
      <div class="nav">
        <div class="toplist">
          <router-link
            :to="`/mulu?source_uuid=${book_uuid}&title=${book_title}`"
            class="mulu"
          >
            <i></i>
            目录
          </router-link>
          <router-link to="/home" class="zuijin">
            <i></i>
            最近阅读
          </router-link>
          <div class="on seton">
            <i class="set"></i>
            设置
          </div>
          <div v-if="moom == 0" class="on mooms">
            <i class="moom"></i>
            夜间模式
          </div>
          <div v-else="moom == 1" class="on mooms">
            <i class="sun"></i>
            日间模式
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { bcFunc } from "@/request/index";
import Loading from "@/components/loading/indexlist.vue";
export default {
  data() {
    return {
      setbockz: false,
      show: false,
      textsize: 16,
      moom: 0,
      book_uuid: this.$route.query.source_uuid,
      book_conid: this.$route.query.content_uuid,
      book_title: this.$route.query.title,
      num: 0,
      bookbtns:true,
      datastr: [],
      id:'',
      title:'',
      isLoading: true,
    };
  },
  components: {
    Loading
  },
  methods: {
    async bkxq() {
      // console.log(book_uuid,book_conid)
      let bkid = this.book_uuid;
      let coid = this.book_conid;
      this.id=this.book_uuid
      this.title=this.book_title
      // console.log(bkid, coid);
      await bcFunc(bkid, coid).then((res) => {
        let { successful, code } = res;
        // console.log(res);
        if (successful !== false) {
          // console.log(res);
          let textconts = res.data.content;
          document.querySelector(".text-body").innerHTML += textconts;
        } else {
          document.querySelector(".link").style.display = "block";
        }
        this.isLoading = false;
      }).catch(err => {
          console.log("请求失败...");
        });
    },
    onclick(e) {
      e = e || window.event;
      if (this.show === true) {
        if (
          e.target.parentNode.className === "nav" ||
          e.target.parentNode.parentNode.className === "nav" ||
          e.target.parentNode.className === "set-text-bs" ||
          e.target.parentNode.className === "texzj" ||
          e.target.className === "set" ||
          e.target.tagname === "button" ||
          e.target.className === "on" ||
          e.target.className === "moom" ||
          e.target.className === "sun"
        ) {
          console.log(e.target.className);
          if (e.target.className === "set" || e.target.className === "on") {
            if (this.setbockz === false) {
              this.setbockz = true;
            } else {
              this.setbockz = false;
            }
          }
          if (
            e.target.parentNode.className === "set-text-bs" ||
            e.target.className === "set" ||
            e.target.parentNode.className === "texzj" ||
            e.target.parentNode.className === "toplist" ||
            e.target.tagname === "button" ||
            e.target.className === "on"
          ) {
            if (e.target.className === "font-small") {
              if (this.textsize >= 11) {
                this.textsize--;
                // console.log(this.num);
                document.querySelector(".text-body").style.fontSize =
                  this.textsize + "px";
              }
            } else if (e.target.className === "font-big") {
              if (this.textsize <= 21) {
                this.textsize++;
                // console.log(this.num);
                document.querySelector(".text-body").style.fontSize =
                  this.textsize + "px";
              }
            }
            // console.log("cg");
          }
          if (
            e.target.parentNode.className === "set-text-bs" ||
            e.target.className === "set" ||
            e.target.parentNode.className === "texzj" ||
            e.target.parentNode.className === "toplist" ||
            e.target.tagname === "button" ||
            e.target.className === "on" ||
            e.target.className === "moom" ||
            e.target.className === "sun"
          ) {
            if (e.target.className === "moom") {
              this.setbockz = false;
              // console.log(this.num);
              this.moom = 1;
              document.querySelector(".text-body").style.backgroundColor =
                "#333";
              document.querySelector(".m-content").style.color =
                "rgb(128, 128, 128)";
              let textsun = document.querySelectorAll(".m-content p");
              textsun.forEach((ix) => {
                ix.style.color = "rgb(128, 128, 128)";
              });
              document.querySelectorAll(".nav")[0].style.backgroundColor =
                "#333";
              document.querySelectorAll(".nav")[1].style.backgroundColor =
                "#333";
              document.querySelector(".set-text-bs").style.backgroundColor =
                "#333";
              document.querySelectorAll(
                ".set-text-bs button"
              )[0].style.backgroundColor = "#333";
              document.querySelectorAll(
                ".set-text-bs button"
              )[1].style.backgroundColor = "#333";

              // console.log( document.querySelectorAll(".nav"))
            } else if (e.target.className === "sun") {
              this.setbockz = false;
              // console.log(this.num);
              this.moom = 0;
              document.querySelector(".text-body").style.backgroundColor =
                "#faf7f5";
              document.querySelector(".m-content").style.color = "black";
              let textsun = document.querySelectorAll(".m-content p");
              textsun.forEach((ix) => {
                ix.style.color = "black";
              });
              document.querySelectorAll(".nav")[0].style.backgroundColor =
                "white";
              document.querySelectorAll(".nav")[1].style.backgroundColor =
                "white";
              document.querySelector(".set-text-bs").style.backgroundColor =
                "white";
              document.querySelectorAll(
                ".set-text-bs button"
              )[0].style.backgroundColor = "white";
              document.querySelectorAll(
                ".set-text-bs button"
              )[1].style.backgroundColor = "white";
            }
            // console.log("cg");
          }
        } else {
          this.setbockz = false;
          this.show = false;
        }
      } else {
        this.show = true;
      }
    },
    moveo(e) {
      let tetlength = document.querySelector(
        ".text-body .m-content"
      ).offsetHeight;
      if (e.deltaY > 0) {
        console.log("开始阅读", e.deltaY);
      } else if (e.deltaY >= tetlength) {
        console.log("阅读完成", e.deltaY);
      }
    },
    getdata(ids,titles) {
      this.bookbtns=false
      console.log("gd");
      let datastr = localStorage.getItem("userdata");
      let usr = JSON.parse(datastr);
      let userdata = {};
      if (datastr == null) {
        let iddata = [];
        iddata[0] = {
          id: ids,
          title: titles,
          push: false,
        };
        userdata.bookid = iddata;
        // console.log( this.userdata)
        let usrdat = userdata;
        console.log(JSON.stringify(usrdat));
        localStorage.setItem("userdata", JSON.stringify(usrdat));
      } else {
        if (ids !== "") {
          let ishas = true;
          let iddata = usr.bookid;
          // console.log(iddata);
          if (iddata){
            iddata.forEach((item) => {
              if (item.id == ids) {
                ishas = false;
              }
            });
          }
          if (ishas == false) {
            alert("已收藏");
            return;
          }
          iddata.push({
            id: ids,
            title: titles,
            push: false,
          });
          userdata.bookid = iddata;
          localStorage.setItem("userdata", JSON.stringify(userdata));
        }
      }
    },
    dldata() {
      this.bookbtns=true
      let datastrs = localStorage.getItem("userdata");
      if (datastrs !== null) {
        this.datastr = JSON.parse(datastrs);
        let id = this.book_uuid;
        // console.log(this.datastr)
        let dlstr = this.datastr.bookid.filter((item) => {
          console.log(item.id);
          if (item.id !== id) {
            return true;
          }
        });
        // console.log(dlstr)
        this.datastr.bookid = dlstr;
        localStorage.setItem("userdata", JSON.stringify(this.datastr));
      }
    },
  },
  created() {
    // console.log(this.$route.query);
    this.bkxq();
  },
  // 生命周期的回调函数（钩子函数）
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.reds {
  width: 100%;
  .reder {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    .nav {
      height: 56px;
      background-color: whitesmoke;
      color: white;
      .toplist {
        height: 100%;
        display: flex;
        margin-right: 3%;
        a {
          box-sizing: border-box;
          display: inline-block;
          text-align: center;
          font-size: 10px;
          margin-left: 10px;
          text-align: left;
          color: #666;
          width: 56px;
          height: 100%;
          text-align: center;
          i {
            width: 32px;
            height: 34px;
            display: inline-block;
            margin-top: 12px;
            margin: 0 auto;
          }
          &.back {
            text-align: left;
            vertical-align: middle;
            margin-right: 50%;
            i {
              vertical-align: middle;
              background: url(../static/imgs/re_back.png) no-repeat center
                center;
              background-size: 24px 24px;
              margin-top: 12px;
            }
          }
          &.home {
            i {
              display: block;
              background: url(../static/imgs/re_home.png) no-repeat center
                center;
              background-size: 24px 24px;
            }
          }
        }
        button {
          background-color: whitesmoke;
          box-sizing: border-box;
          display: inline-block;
          text-align: center;
          font-size: 10px;
          margin-left: 10px;
          text-align: left;
          color: #666;
          width: 71px;
          height: 100%;
          text-align: center;
          i {
            width: 32px;
            height: 34px;
            display: inline-block;
            margin-top: 12px;
            margin: 0 auto;
          }
          &.books {
            i {
              display: block;
              background: url(../static/imgs/re_bksjia.png) no-repeat center
                center;
              background-size: 24px 24px;
            }
          }
          &.booksdel {
            i {
              display: block;
              background: url(../static/imgs/re_bksjia.png) no-repeat center
                center;
              background-size: 24px 24px;
            }
          }
        }
      }
    }
  }
  .botms {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .nav {
      height: 60px;
      background-color: whitesmoke;
      color: white;
      .toplist {
        height: 100%;
        display: flex;
        a {
          box-sizing: border-box;
          display: inline-block;
          text-align: center;
          font-size: 10px;
          margin-left: 10px;
          text-align: left;
          color: #666;
          width: 33%;
          height: 100%;
          text-align: center;
          i {
            width: 32px;
            height: 34px;
            display: inline-block;
            margin-top: 12px;
            margin: 0 auto;
          }
          &.mulu {
            i {
              display: block;
              background: url(../static/imgs/mulu.png) no-repeat center center;
              background-size: 24px 24px;
            }
          }
          &.zuijin {
            i {
              display: block;
              background: url(../static/imgs/time.png) no-repeat center center;
              background-size: 24px 24px;
            }
          }
        }
        .on {
          box-sizing: border-box;
          display: inline-block;
          text-align: center;
          font-size: 10px;
          margin-left: 10px;
          text-align: left;
          color: #666;
          width: 33%;
          height: 100%;
          text-align: center;
          i {
            width: 32px;
            height: 34px;
            display: inline-block;
            margin-top: 12px;
            margin: 0 auto;
            display: block;
            &.set {
              background: url(../static/imgs/textst.png) no-repeat center center;
              background-size: 24px 24px;
            }
            &.moom {
              background: url(../static/imgs/moom.png) no-repeat center center;
              background-size: 24px 24px;
            }
            &.sun {
              background: url(../static/imgs/sun.png) no-repeat center center;
              background-size: 24px 24px;
            }
          }
        }
      }
    }
  }
  .set-text-bs {
    position: fixed;
    left: 0;
    bottom: 60px;
    width: 100%;
    box-sizing: border-box;
    background: whitesmoke;
    p {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      font-size: 16px;
      color: #555;
      button {
        width: 20%;
        height: 30px;
        line-height: 30px;
        border: #d2cdc8 solid 1px;
        float: right;
        border-radius: 16px;
        margin: 7px 0 0 10px;
        color: #8c857d;
      }
    }
  }
  .text-body {
    box-sizing: content-box;
    padding: 0 6%;
    background: #f5f5f5;
    background-color: #faf7f5;
    padding-bottom: 30px;
    .m-content {
      h1 {
        display: block;
        box-sizing: content-box;
        padding: 20px 0;
      }
      p {
        line-height: 1.4;
        color: #222;
        text-align: justify;
        text-indent: 2em;
        margin-bottom: 1%;
      }
    }
  }
  .link {
    display: none;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: white;
    .link-text {
      width: 100%;
      height: 40px;
      padding: 25% 11%;
      img {
        display: block;
        width: 40vw;
        margin: 25% 25%;
      }
    }
  }
}
</style>